<template>
  <!-- 底部按钮 -->
  <div class="btnes">
    <div class="footer">
      <div v-for="(item,i) in btns" :key="i" class="footItem" @click="jump(i)" :class="{active : i == index}">
        <div class="iconfont" :class="item.icon"></div>
        <div class="text">{{item.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"index",
    data(){
      return{
        index:0,
        btns:[
          {
            icon:"icon-shouye",
            text:"首页"
          },
          {
            icon:"icon-dingdan",
            text:"订单"
          },
          {
            icon:"icon-shequ-jihuo",
            text:"美景"
          },
          {
            icon:"icon-31wode",
            text:"我的"
          },
        ]
      }
    },
    methods:{
      jump(index){
          const arr = ["index","order","comment","my"]
          const which = arr[index];
          if(which == this.$route.name) return;
          this.index = index;
          // this.$route.name = which;
          this.$router.push(which);
      }
    },
    mounted(){
      const arr = ["index","order","comment","my"]
      // console.log(this.$route);
      let index = arr.indexOf(this.$route.name);
      // console.log(index);
      this.index = index;
    }
};
</script>

<style lang="less">
.btnes {
  width: 100vw;
  overflow: auto;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  z-index: 99;
  background-color: white;
  .footer {
    display: flex;
    justify-content: space-evenly;
    .footItem {
      text-decoration: none;
      margin: 10px;
      width: 25%;
      color: #c5c4c4;
      .text{
        font-size: 14px;
        // color: #c5c4c4;
      }
      &.active {
        color: rgb(76, 192, 228);
      }
    }
}
}
</style>